<template>
	<view>
		<view class="header_box" :style="{'backgroundColor':backgroundColor,'color':fontColor}">
			<view class="header_back">
				<uni-icons v-if="hasBack" @click="backTo()" type="back" size="30"></uni-icons>
			</view>
			<view class="header_tit">
				{{tit}}
			</view>
		</view>
		<view class="header_seat">
		</view>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		fontColor: {
			type: String,
			default: '#333'
		},
		tit: {
			type: String,
			default: '标题'
		},
		hasBack: {
			type: Boolean,
			default: true
		}
	})
	
	// 返回上一页的方法
	const backTo = ()=>{
		uni.navigateBack({
			delta: 1
		})
	}
	
</script>

<style lang="scss" scoped>
.header_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 32rpx 32rpx;
	padding-top: calc(env(safe-area-inset-bottom) + 28rpx);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 100rpx 1fr 100rpx;
	align-items: center;
	z-index: 4;
	.header_tit {
		text-align: center;
		font-size: 32rpx;
	}
}
.header_seat {
	height: 60rpx;
	padding: 32rpx 32rpx;
	padding-top: calc(env(safe-area-inset-bottom) + 28rpx);
}
</style>